<template>
  <div class="homeList">
    <!-- 选项卡 -->
    <div class="header-homeList">
      <router-link to="/layout/home">{{ $t("m.all") }}</router-link>
      <!-- 动态渲染的页面 -->
      <router-link
        v-for="item in classifyList"
        :key="item.id"
        :to="{ name: 'Classify', params: { id: item.id } }"
        >{{ item.name }}</router-link
      >
    </div>
    <!-- 文章列表 -->
    <div class="list-homeList">
      <div class="item-article" v-for="item in detail.children" :key="item.id">
        <div class="tit" @click="toArticle(item.id)">
          <h4>{{ item.title }}</h4>
          <span>大约{{ item.create_time | time }}</span>
          <span>{{ item.type }}</span>
        </div>
        <div class="con">
          <img :src="item.url" alt="" v-if="item.url" />
          <div>
            <p><i class="el-icon-s-flag"></i>{{ item.likes }}</p>
            ·
            <p><i class="el-icon-s-comment"></i>{{ item.read_num }}</p>
            ·
            <p @click="share(item)">
              <i class="el-icon-share"></i>{{ $t("m.share") }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="back" v-if="isOpen" @click="backTop()">
      <i class="el-icon-top"></i>
    </div>
    <!-- 分享框 -->
    <el-dialog
      title="分享海报"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div v-if="dialogContent.url" class="img-share">
        <img :src="dialogContent.url" alt="" />
      </div>
      <h3>{{ dialogContent.title }}</h3>
      <dl>
        <dt>
          <img src="../assets/QRcode.png" alt="" />
        </dt>
        <dd>
          <p>识别二维码查看文章</p>
          <p>原文分享自<span>hhhh</span></p>
        </dd>
      </dl>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >下 载</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      classifyList: [],
      isOpen: false,
      dialogVisible: false,
      dialogContent: {},
    };
  },
  computed: {
    ...mapState("classify", ["detail"]),
  },
  created() {
    this.getClassifyList();
  },
  methods: {
    //获取分类列表
    getClassifyList() {
      this.$api.getClassifyList().then((res) => {
        if (res.success) {
          this.classifyList = res.data;
        }
      });
    },
    // 返回顶部
    backTop() {
      document.documentElement.scrollTop = 0;
    },
    // 跳转文章详情
    toArticle(id) {
      this.$router.push("/layout/article/" + id);
    },
    // 点击分享
    share(item) {
      this.dialogVisible = true;
      this.dialogContent = item;
    },
    // 关闭分享框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  components: {},
};
</script>
<style lang='scss' scoped>
@import "../assets/scss/_theme.scss";
.homeList {
  background-color: #fff;
  @include background_color("background_color3");
  margin-top: 20px;
  .header-homeList {
    height: 60px;
    display: flex;
    align-items: center;
    a {
      text-decoration: none;
      margin: 0 15px;
      color: #000;
      @include font_color("font_color1");
    }
    a:hover {
      color: red;
    }
    a.router-link-active {
      color: red;
    }
  }
  .list-homeList {
    .item-article {
      border-top: 1px solid #ccc;
      padding: 0 20px;
      .tit {
        display: flex;
        height: 60px;
        align-items: center;
        h4 {
          margin-right: 10px;
        }
        h4:hover {
          color: red;
        }
        span {
          font-size: 12px;
          color: #aeaeae;
          border-left: 1px solid #aeaeae;
          padding: 0 10px;
        }
      }
      .con {
        display: flex;
        align-items: flex-end;
        margin-bottom: 20px;
        img {
          width: 230px;
          height: 130px;
        }
        div {
          display: flex;
          width: 150px;
          height: 40px;
          align-items: center;
          justify-content: space-around;
          color: #8590a6;
        }
      }
    }
  }
  .back {
    position: fixed;
    bottom: 100px;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #000;
    .el-icon-top {
      font-size: 25px;
      color: #fff;
    }
  }
  .el-dialog .el-dialog__body {
    .img-share {
      img {
        width: 100%;
      }
    }
    h3 {
      margin: 20px 0;
    }
    dl {
      display: flex;
      dd {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 15px;
        padding: 10px 0;
        span {
          color: red;
        }
      }
    }
  }
}
</style>